<script setup lang="ts">
import { fetchProjectContactsAPI } from '@/apis/fetchProjectContacts'
import { fetchProjectDetailAPI } from '@/apis/fetchProjectDetail'
import { useUserInfoStore } from '@/store/userInfo'

const userInfoStore = useUserInfoStore()
const loading = ref(true)
const project = ref<Project | null>(null)
const personList = ref<Person[]>([])

const manager = computed(() => ({
  identity: '地区经理',
  ...project.value?.manage,
}))
const foreman = computed(() => ({
  identity: '工长',
  ...project.value?.foreman,
}))
const salesRep = computed(() => ({
  identity: '业务员',
  id: project.value?.salesman_id,
  nickname: project.value?.salesman?.nickname,
  mobile: project.value?.salesman?.mobile,
  avatar: project.value?.salesman?.avatar,
}))

const all = computed(() => [manager.value, foreman.value, salesRep.value, ...personList.value])

function getPersonInfo(person?: any) {
  if ((person as any).nickname !== undefined) {
    return {
      avatar: (person as Staff).avatar,
      name: (person as Staff).nickname,
      mobile: (person as Staff).mobile,
      identity: (person as any).identity,
    }
  }
  else {
    return {
      avatar: undefined,
      name: (person as Person).name,
      mobile: (person as Person).mobile,
      identity: (person as Person).profession,
    }
  }
}

onLoad(async (options) => {
  if (options && options.project_id) {
    fetchProjectDetailAPI(options.project_id, userInfoStore.userInfo!.token!)
      .then((res) => {
        project.value = (res.data as any).data as Project
        loading.value = false
      })
      .catch(() => {
        uni.showToast({ title: '获取数据失败', icon: 'none' })
        loading.value = false
      })
    fetchProjectContactsAPI(options.project_id, userInfoStore.userInfo!.token!)
      .then((res) => {
        personList.value = (res.data as any).data as Person[]
        loading.value = false
      })
      .catch(() => {
        uni.showToast({ title: '获取数据失败', icon: 'none' })
        loading.value = false
      })
  }
  else {
    uni.showToast({ title: '获取数据失败', icon: 'none' })
    loading.value = false
  }
})

function handleCall(phoneNumber?: string) {
  if (phoneNumber) {
    uni.makePhoneCall({
      phoneNumber,
      fail: () => { uni.showToast({ title: '呼叫取消', icon: 'none' }) },
    })
  }
  else {
    uni.showToast({ title: '呼叫失败', icon: 'none' })
  }
}
</script>

<template>
  <view class="flex flex-col min-h-screen bg-#F8F8F8">
    <Spacer height="30" />
    <ContactCard
      :contact-name="project?.contacts_name || '未知'" contact-identity="业主"
      :contact-mobile="project?.contacts_mobile || '未知'" @call="() => handleCall(project?.contacts_mobile)"
    />
    <Spacer height="30" />
    <view v-if="all.length > 0" class="rounded-20rpx overflow-hidden">
      <view v-for="person, index in all" :key="index">
        <PersonItemWithCallButton
          :avatar="person.avatar || 'http://jzt.tykhrs.cn/uploads/20240204/87b5977293b9856b96b77b21dcfc3e2a.png'"
          :name="getPersonInfo(person).name || '未知'" :identity="getPersonInfo(person).identity || '未知'"
          :phone-number="getPersonInfo(person).mobile || '未知'" @call="() => handleCall(person.mobile)"
        />
        <Divider />
      </view>
    </view>
    <PageDefault v-else />
    <Spacer height="120" />
    <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
  </view>
</template>

<route lang="yaml">
name: 'projectContacts'
style:
  navigationBarTitleText: '项目通讯录'
</route>
